<template>
  <div>
    <header-v></header-v>
    <div class="ris_cont">
      <!--<div class="ris_cont_headNav">字典页面&gt;科室维护</div>-->
      <div class="ris_cont_headHint">收费项目设置<div class="ris_cont_headHint_add" @click="add_ks()">+</div></div>
      <div class="ris_cont_dept">
        <table class="ris_cont_dept_tab5">
          <tr>
            <th>编号</th>
            <th>类型名称</th>
            <th>拼音码</th>
            <th>设备类型名称</th>
            <th>是否使用</th>
            <th>排序号</th>
            <th>归属系统</th>
            <th>归属编号</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
          <tr v-for="(ft,index) in FeeTypes">
            <td>{{ft.code}}</td>
            <td>{{ft.name}}</td>
            <td>{{ft.pycode}}</td>
            <td>{{ft.eqpTypename}}</td>
            <td>{{ft.isuse  | usefilter}}</td>
            <td>{{ft.sortnum}}</td>
            <td>{{ft.source}}</td>
            <td>{{ft.sourcecode}}</td>
            <td :title="ft.memo">{{ft.memo | length6}}</td>
            <td>
              <button class="ris_cont_dept_tab_change bg_deepBlue color_white button" @click="update(ft)">修改</button>
              <button class="ris_cont_dept_tab_delete  bg_yellow color_white button" @click="dele(ft.id)">删除</button>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <!--新增或修改模态-->
    <div class="ris_dept_modalN" v-show="modal_show">
      <div>
        <p class="ris_dept_modal_headN">收费类型设置<span class="ris_dept_modal_btn_close" @click="closeModal">X</span></p>
        <table class="ris_dept_modal_tabN">
          <tr>
            <td>收费类型</td>
            <td><input type="text" v-model="FeeType.name" @blur="change(FeeType.name)"></td>
          </tr>
          <tr>
            <td>拼音码</td>
            <td><input type="text" v-model="FeeType.pycode"></td>
          </tr>

          <tr>
          <td>设备类型</td>
          <td>
            <select v-model="FeeType.eqptypecode">
              <option v-for="(eq,index) in eqtypes" :value="eq.code">{{eq.name}}</option>
            </select>
          </td>
        </tr>

          <tr>
            <td>是否使用</td>
            <td>
              <select v-model="FeeType.isuse">
                <option value="1">是</option>
                <option value="0">否</option>
              </select>
            </td>
          </tr>

          <tr>
            <td>排序号</td>
            <td><input type="number" v-model="FeeType.sortnum"  @blur="getsortnum()"></td>
          </tr>

          <tr>
            <td>归属系统</td>
            <td><input type="text" v-model="FeeType.source"></td>
          </tr>

          <tr>
            <td>归属编号</td>
            <td><input type="text" v-model="FeeType.sourcecode"></td>
          </tr>

          <tr>
            <td>备注</td>
            <td>
              <textarea v-model="FeeType.memo"></textarea>
            </td>
          </tr>
        </table>
        <div class="ris_dept_modal_btnN">
          <button @click="button()">确认</button>
          <button class="ris_dept_modal_btn_close" @click="closeModal">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import Header from '@/components/Header/Header'


  export default {
    components:{
      'header-v':Header,
    },
    data() {
      return {
        msg: 'hello vue',
        //所有对象
        FeeTypes:"",
        //模态开合
        modal_show:false,
        //组大sortnum
        sortnum:"",
        //设备类型 isuse=1
        eqtypes:"",
        //初始一条对象obj:{"pycode":""},
        FeeType:{
//          "pycode":""
          code:"",
          name:"",
          pycode:"",
          isuse:1,
          sortnum:"",
          source:"",
          sourcecode:"",
          memo:"",
          eqptypecode:"",//设备类型
        },
        //1 添加 2 修改
        add_update:"",
      }
    },

    created(){

      this.$http.get(window.localStorage.url+"/baseFeeType/findFeeType")
        .then(function (res) {

            this.FeeTypes = res.data.data;

        });
////      getEqptypes   isuse = 1
//      this.$http.get(window.localStorage.url+"/baseEqptype/getEqptypes")
//        .then(function (res) {
//          this.eqtypes = res.data.data;
//          console.log(this.eqtypes);
//        });

    },

    methods:{

      //公共弹窗
      addModal:function (text,time) {
        $pg.popup({
          text:text,//显示的文本
          btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
          btnBgColor:'#4f56a3',//按钮的颜色
          btnToggle:{
            btnDetermine:true,//确定按钮是否显示
            btnCancel:false,//取消按钮是否显示
          },
          timeOut:time,
        });
      },

      //添加
      add_ks(){

        this.FeeType={
          code:"",
          name:"",
          pycode:"",
          isuse:1,
          sortnum:"",
          source:"",
          sourcecode:"",
          memo:"",
          eqptypecode:"",//设备类型
        };

        this.add_update=1;
        this.modal_show=true;

        this.$http.get(window.localStorage.url + "/baseFeeType/findMaxNum")
          .then(function(res) {
            this.FeeType.sortnum = res.data.data;
          });

        //      getEqptypes   isuse = 1
        this.$http.get(window.localStorage.url+"/baseEqptype/getEqptypes")
          .then(function (res) {
            this.eqtypes = res.data.data;
            this.FeeType.eqptypecode = res.data.data[0].code;
//            console.log( this.FeeType.eqptypecode);
          });
//        console.log(this.FeeType);



      },
      //修改
      update(ft){
        this.FeeType={
//          "pycode":""
          code:"",
          name:"",
          pycode:"",
          isuse:1,
          sortnum:"",
          source:"",
          sourcecode:"",
          memo:"",
          eqptypecode:"",//设备类型
        };
        this.add_update=2;
        this.modal_show=true;
        this.$http.get(window.localStorage.url+"/baseEqptype/getEqptypes")
          .then(function (res) {
            this.eqtypes = res.data.data;

//            console.log( this.FeeType.eqptypecode);
          });
        this.FeeType=ft;
      },

      button(){

        if(this.FeeType.name==""){
          $pg.popup({
            text:"名称不能为空！",//显示的文本
            btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
            btnBgColor:'#4f56a3',//按钮的颜色
            determine:function(){

            },//点击确定执行的方法
          });

          return;
        }

//        if(this.FeeType.sortnum==""){
//
//          $pg.popup({
//            text:"排序号不能为空！",//显示的文本
//            btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
//            btnBgColor:'#4f56a3',//按钮的颜色
//            determine:function(){
//
//            },//点击确定执行的方法
//          });
//
//          return;
//        }
        //添加
        if(this.add_update==1){
//          console.log(this.FeeType);
          this.$http.post(window.localStorage.url+"/baseFeeType/addFeeType",this.FeeType)
            .then(function (res) {
              if(res.data.status == 'SUCCESS'){
                this.addModal(res.data.data, 1);//公共弹窗
                this.modal_show=false;
                this.$http.get(window.localStorage.url+"/baseFeeType/findFeeType")
                  .then(function (res) {

                    this.FeeTypes = res.data.data;

                  });

              }else{
                this.addModal(res.data.data, true);//公共弹窗
              }

            });


        }
        //修改
        if(this.add_update==2){

          this.$http.post(window.localStorage.url+"/baseFeeType/updateFeeType",this.FeeType)
            .then(function (res) {
              if(res.data.status == 'SUCCESS'){
                this.addModal(res.data.data, 1);//公共弹窗
                this.modal_show=false;
                this.$http.get(window.localStorage.url+"/baseFeeType/findFeeType")//遍历
                  .then(function (res) {

                    this.FeeTypes = res.data.data;

                  });

              }else{
                this.addModal(res.data.data, true);//公共弹窗
              }

            });

        }

      },

      dele(id){//删除
//        console.log(id);
        var _this=this;
        $pg.popup({
          text:"确定删除吗？",//显示的文本
          btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
          btnBgColor:'#4f56a3',//按钮的颜色
          determine:function(){

            _this.$http.get(window.localStorage.url+"/baseFeeType/deleteFeeType?id="+id)
              .then(function (res) {
                if(res.data.status=='SUCCESS') {
                  //提示框
                  _this.addModal(res.data.data,1);//公共弹窗

                  this.$http.get(window.localStorage.url+"/baseFeeType/findFeeType")
                    .then(function (res) {

                      this.FeeTypes = res.data.data;

                    });

                }else{
                  _this.addModal(res.data.data,true);//公共弹窗

                }
              });




          }
        });




      },

      closeModal(){

        this.modal_show=false;
        this.$http.get(window.localStorage.url+"/baseFeeType/findFeeType")
          .then(function (res) {

            this.FeeTypes = res.data.data;

          });


      },

        change(name){

          this.$http.get(window.localStorage.url+"/pytool/getPyCode?name="+name)
            .then(function (res) {
              this.FeeType.pycode=res.data.data;
            });

        },

      //sortnum 为空时默认为0
      getsortnum(){
        if(this.FeeType.sortnum==""){
          this.FeeType.sortnum=0;
        }
      },





    },

    filters:{
      //过滤器
      usefilter(isuse){
        if(isuse==1){
          return "是";
        }else{
          return "否";
        }
      },
      length6(text){
        text=$.trim(text)+"";
        if(text.length>=7){
          text=text.slice(0,6);
          text=text+"...";
          return text;
        }else{
          return text;
        }
      },

    },



  }
</script>
<style scoped>
  /*body {*/
  /*background-color: #ff0000;*/
  /*}*/
  .ris_cont_headHint {
    height: 40px;
    background-color: #999;
    color: #f1f1f1;
    line-height: 40px;
    padding-left: 30px;
    box-sizing: border-box;
  }


  /*新增按钮*/
  .ris_cont_headHint_add{
    width: 70px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    float: right;
    background-color: #666;
    color: #fff;
    cursor: pointer;
  }
  /*内容区*/
  .ris_cont_dept{
    width: 95%;
    margin: 0 auto;
    background-color: #fff;
  }
  .ris_cont_dept_tab5{
    width: 100%;
    line-height: 40px;
    font-size: 12px;
    text-align: center;
    margin-top: 15px;
  }
  .ris_cont_dept_tab5 tr td,.ris_cont_dept_tab tr th{
    border: 1px solid #ddd;
  }
  .ris_cont_dept_tab5 tr th{
    background-color: #666;
    color: #fff;
  }
  .ris_cont_dept_tab5 tr td:last-child{
    width: 20%;
  }
  .ris_cont_dept_tab5 tr td:last-child button{
    width: 24%;
    height: 26px;
    margin: 0 3%;
    /*background-color: #215c84;*/
    background: transparent;
    border: 0;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
  }
  .ris_cont_dept_tab5 tr td:last-child button:nth-child(1){
    color: #57e103;
  }
  .ris_cont_dept_tab5 tr td:last-child button:nth-child(2){
    color: #0000ff;
  }
  .ris_cont_dept_tab5 tr td:last-child button:last-child{
    color: #FF3C2B;
  }
  .ris_cont_dept_tab5 tr td:last-child button:hover{
    /*background-color: #1a4161;*/
  }


  /*点击删除弹出的模态框*/
  .ris_dept_delete{
    position: fixed;
    z-index: 800;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(66,66,66,.2);
    display: none;
  }
  .ris_dept_delete>div{
    position: absolute;
    width: 260px;
    height: 150px;
    left: 50%;
    top: 50%;
    margin-left: -130px;
    margin-top: -75px;
    border: 1px solid #000;
    border-radius: 10px;
    background-color: #fff;
  }
  .ris_dept_delete_head{
    height: 30px;
    text-align: right;
    background-color: #999;
    border-radius: 10px 10px 0 0 ;
  }
  .ris_dept_delete_head span{
    display: inline-block;
    padding: 0 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
  }
  /*文字*/
  .ris_dept_delete_text{
    line-height: 70px;
    padding-left: 20px;
    font-size: 14px;
    color: #666;
  }
  /*按钮*/
  .ris_dept_delete_btn{
    text-align: right;
  }
  .ris_dept_delete_btn button{
    width: 70px;
    background-color: #215c84;
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    height: 30px;
    margin-right: 20px;
  }
  .ris_dept_delete_btn button:hover{
    background-color: #1a4161;
  }

  .ris_cont {
    width: 95%;
    min-width: 1300px;
    /* border: 1px solid red; */
    margin: 50px auto 40px;
  }

  /*新增或修改的模态*/
  .ris_dept_modalN{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(66,66,66,.2);
    z-index: 2;
    /*display: none;*/
  }
  .ris_dept_modalN>div{
    position: absolute;
    width: 400px;
    height: 460px;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -230px;
    border: 1px solid #000;
    background: #f7f7f7;
    border-radius: 10px;
  }
  /*模态头部*/
  .ris_dept_modal_headN{
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    border-bottom: 1px solid #666;
    background: #999;
    border-radius: 10px 10px 0 0;
    font-size: 14px;
    color: #fff;
  }
  .ris_dept_modal_headN span{
    display: inline-block;
    float: right;
    padding: 0 20px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
  }
  /*模态里面的内容*/
  .ris_dept_modal_tabN{
    width: 85%;
    margin: 0 auto;
    line-height: 37px;
    margin-top: 20px;
  }
  .ris_dept_modal_tabN tr td:nth-child(1){width: 20%}
  .ris_dept_modal_tabN tr td:nth-child(2){width: 80%}
  .ris_dept_modal_tabN tr td input,.ris_dept_modal_tabN tr td select{
    width: 100%;
    height: 28px;
    border: 1px solid #666;
    border-radius: 3px;
    box-sizing: border-box;
  }
  .ris_dept_modal_tabN tr td textarea{
    width: 100%;
    height: 60px;
    border: 1px solid #666;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5px;
    margin-top: 10px;
  }
  .ris_dept_modal_btnN{
    text-align: right;
  }
  .ris_dept_modal_btnN button{
    width: 80px;
    height: 36px;
    background-color: #215c84;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    margin-right: 50px;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
  }
  .ris_dept_modal_btnN button:hover{
    background-color: #1a4161;
  }

</style>
